import Vue from 'vue'; // 会默认先查找source 目录下的vue文件夹(webpack resolve配置)

let vm = new Vue({
    el:'#app', // 表示要渲染的元素是app
    data(){
        return {
            msg:'hello',
            school:{name:'ahhh',age:11},
            arr:[{a:1},2,3]
        }
    }
});

/** 1. proxy和observe*/
// console.log('vm.msg:', vm.msg/*←会代理到vm._data.msg*/); // 会触发访问属性的getter
// vm.msg/*←会代理到vm._data.msg*/ = 'hello2'; // 会触发访问属性的setter
// console.log('vm._data.msg:', vm._data.msg); // 会触发访问属性的getter
// vm._data.msg = 'hello3'; //  会触发访问属性的setter
// console.log(vm.school);

/*
获取数据
vm.msg: hello
设置数据
获取数据
vm._data.msg: hello2
设置数据
获取数据
{
    name:'ahhh'
    ,age:11
}
*/


/** 2. 拦截array*/
/*
获取数据
调用了数组更新的方法了  -- 更新视图
*/
vm.arr/*←.arr会访问到arr属性的getter,会打印->获取数据*/.push(4)/*←访问数组方法访问的是我们拦截下来换上去的自定义方法,会打印->调用了数组更新的方法了  -- 更新视图*/;
